<template>
  <view
    v-if="showNotice"
    class="tn-notice-bar"
  >
    <tn-column-notice
      v-if="mode === 'vertical' || (mode === 'horizontal' && !circular)"
      v-bind="props"
      @left-click="handleLeftIconClick"
      @right-click="handleRightIconClick"
      @click="handleNoticeClick"
    ></tn-column-notice>
    <tn-row-notice
      v-else
      v-bind="props"
      @left-click="handleLeftIconClick"
      @right-click="handleRightIconClick"
      @click="handleNoticeClick"
    ></tn-row-notice>
  </view>
</template>

<script lang="ts" setup>
import { noticeProps, noticeEmits } from '../../../types/tn-notice-bar'
import { computed } from 'vue'
import TnColumnNotice from './ColumnNotice.vue'
import TnRowNotice from './RowNotice.vue'

const props = defineProps(noticeProps)
const emits = defineEmits(noticeEmits)

// 标记是否显示通知栏
const showNotice = computed<boolean>(() => {
  // 当设置了show为false，或者autoHidden为true且list为空时，不显示通知
  return props?.show || !(props.autoHidden && props?.data?.length === 0)
})

// 点击左图标事件
const handleLeftIconClick = () => {
  emits('left-click')
}
// 点击右图标事件
const handleRightIconClick = () => {
  emits('right-click')
}
// 点击通知事件
const handleNoticeClick = (e: string | number) => {
  emits('click', e)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

.tn-notice-bar {
  width: 100%;
  overflow: hidden;
}
</style>
